/* eslint-disable react/prop-types */
import {useState,useEffect} from 'react'
import { Col, Row ,Button,Input,Select} from 'antd';
import {GetRole} from '../../../../api/index'
function SearchStaff({searchParams,onChange}) {
  const [options,setOptions] = useState([])
  const [searchData,setSearchData] = useState({...searchParams})
  useEffect(()=>{
    GetRole({size:1000,order:'asc'})
    .then(res=>{
      // 拿到角色，并映射为需要的格式
      setOptions(res.data.data.map(item=>({value:item.id,label:item.name})))
    })
  },[])

  return ( <div className="search">
  <Row>
    <Col span={6}>
        账号：<Input value={searchData.id} onChange={e=>setSearchData({...searchData,id:e.target.value})} />
    </Col>
    <Col span={6}>
        姓名：<Input value={searchData.name} onChange={e=>setSearchData({...searchData,name:e.target.value})}/>
    </Col>
    <Col span={6}>
      手机号：<Input value={searchData.tel} onChange={e=>setSearchData({...searchData,tel:e.target.value})}/>
    </Col>
    <Col span={6}>
      角色：
      <Select 
      value={searchData.user_group}
      options={options}
      defaultValue={searchData.user_group} 
      allowClear
      onChange={e=>setSearchData({...searchData,user_group:e})}
      ></Select>
    </Col>
  </Row>
  <Row>
    <Col span={6}>
      <Button type='primary' onClick={()=>onChange(searchData)}>搜索</Button>
      <Button  onClick={       
        ()=>{
           setSearchData({...searchData,user_group:''})
          onChange({id:'',tel:'',user_group:'',name:''})}
        }>重置</Button>
    </Col>
     
  </Row>
  
</div>  );
}

export default SearchStaff;